<template>
    <div class="detect-box app-container tz-app">
        <div class="serve-real flex">
            <div class="real-left flex-left">
                <!-- <div class="real-headline flex-s b-left b-right">
                    <div class="real-button real-button-left " :class="interface.button == 0 ? 'real-opt' : ''"
                        @click="setInterface(0)">传输界面</div>
                    <div class="real-button real-button-right" :class="interface.button == 1 ? 'real-opt' : ''"
                        @click="setInterface(1)">地图界面</div>

                </div> -->
                <!-- <audio controls style=" height: 40px;" :src="txt"></audio> -->
                <div class="chat-box" v-if="chatShow" style="height: calc(100vh - 86px);">
                    <div>
                        <ChatWindow ref="chat" :type="chatType == 1 ? true : false" :receiveChat="receiveChat"
                            :sendChat="sendChat" @setReceivePageNum="setReceivePageNum"
                            @setSendPageNum="setSendPageNum">
                        </ChatWindow>
                        <!-- <div v-else style="height: calc(100vh - 300px); width: 100%;" class="flex-s">
                            <div>
                                <img src="@/assets/img/customer-service.png" style="width: 75px;height: 75px;">
                                <div style="text-align: center; color: white;font-size: 16px;">在 线 语 音</div>
                            </div>

                        </div> -->
                    </div>
                    <div class="chat-end" v-show="chatType == 1">
                        <!-- <div class="chat-hint">低速传输（限制30个字符）</div> -->
                        <div class="chat-input-box flex-s">
                            <el-input class="chat-input" v-model="sendData.data" maxlength="30"
                                @keyup.enter="send"></el-input>
                            <div class="chat-button cursor" @click="send(1)">发送</div>
                            <!-- <img src="@/assets/images/setsend.png" @click="chatType = 1"
                                style="width: 60px;cursor: pointer;margin-left: 10px;" /> -->
                        </div>
                    </div>

                    <div class="chat-end chat-audio flex-s" v-show="chatType == 2">
                        <div class="audio-box">
                            <TProgress :progress="sendProgress" />
                            <div class="audio-box flex-s" style="height: 30px;">
                                <div class="flex-left flex-item">
                                    <div class="flex-right audio-button2 cursor" @click="uploadAudio">
                                        <div class="flex-s">上传音频
                                            <img src="@/assets/img/upload-2.png"
                                                style="width: 20px;height: 20px;margin-left: 5px;">
                                        </div>
                                    </div>

                                    <!-- Display current audio file name -->
                                    <!-- <div v-if="audioSrc" id="currentAudio">{{ audioSrc }}</div> -->

                                    <audio v-if="audioSrc" controls style=" height: 40px;" :src="audioSrc"></audio>


                                </div>

                                <!-- <div class="flex-left">当前无录音</div> -->
                                <div class="chat-button2 cursor" v-if="audioSrc == null" style="margin-left: auto;">发送
                                </div>
                                <div class="chat-button cursor" v-else style="margin-left: auto;" @click="send(0)">发送
                                </div>
                                <!-- <img src="@/assets/images/setsend.png" @click="chatType = 0"
                                    style="width: 60px;cursor: pointer;margin-left: 10px;" /> -->

                            </div>
                        </div>

                    </div>


                    <div class="chat-end chat-audio flex-s" v-show="chatType == 3">
                        <div class="audio-box flex-s">
                            <div class="chat-button cursor" @click="send(3)">发送</div>
                        </div>
                    </div>

                    <div class="chat-end chat-audio flex-s" v-show="sendData.sendType == ''">

                    </div>

                    <!-- <div class="chat-end chat-audio flex-s" v-show="message.button == 2">
                        <div class="audio-box flex-s">
                            <div class="flex-left audio-button3 cursor">
                                <div class="flex-s">按下通话</div>
                            </div>
                            <div class="flex-left audio-hint">
                                请使用麦克风说话
                            </div>
                            <img src="@/assets/img/customerservice.png" style="width: 70px; height: 70px;" />
                        </div>
                    </div> -->
                </div>



                <div class="chat-box" v-if="!chatShow" style="height: calc(100vh - 86px);"></div>
            </div>
            <div class="real-right flex-right">
                <div class="real-headline flex-s b-right">
                    <div class="real-button real-button-left" :class="message.button == 0 ? 'real-opt' : ''"
                        @click="setMessage(0)">
                        发射</div>
                    <div class="real-button real-button-right" :class="message.button == 1 ? 'real-opt' : ''"
                        @click="setMessage(1)">接收
                    </div>
                    <!-- <div class="real-button real-button-right" :class="message.button == 2 ? 'real-opt' : ''"
                        @click="setMessage(2)">在线语音</div> -->
                </div>


                <div class="station-function station-lora" v-show="message.button == 0">
                    <el-form label-width="100px" label-position="right">
                        <div class="gray" style="margin-bottom: 20px;">传输电台</div>
                        <el-row :span="24">
                            <el-col :span="12">
                                <el-form-item label="发送:" label-width="50px">
                                    <el-select v-model="sendData.srcId" placeholder="选择发送电台" class="blank-input"
                                        @change="dstIdChange">
                                        <el-option v-for="item in listAll.station" :key="item.radioStationCode"
                                            :label="item.radioStationName" :value="item.radioStationCode">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="接收:" label-width="50px">
                                    <el-select v-model="sendData.dstId" placeholder="选择接收电台" class="blank-input"
                                        @change="dstIdChange" filterable allow-create>
                                        <el-option v-for="item in listAll.station" :key="item.radioStationCode"
                                            :label="item.radioStationName" :value="item.radioStationCode">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <div class="gray" style="margin-bottom: 20px;">发射设置</div>
                            <div class="flex" v-show="message.button == 0">
                                <el-form-item label="工作频率:">
                                    <el-input placeholder="0" v-model="virtualFreq" class="blank-input m-10"
                                        style="width: calc(100% - 60px)"></el-input>
                                        <span>MHz</span>
                                </el-form-item>
                                <el-tooltip class="item" effect="dark" content="1~100档功率" placement="top">
                                    <el-form-item label="发射功率:">
                                        <el-input-number v-model="sendData.power" :step="1" step-strictly class="blank-input" :min="1" :max="100" :controls="false"></el-input-number>
                                        <!-- <el-input placeholder="0" v-model="sendData.power"
                                            class="blank-input m-10"></el-input> -->
                                    </el-form-item>
                                </el-tooltip>
                                <el-form-item label="发射次数:">
                                    <el-input placeholder="0" v-model="sendData.sendTimes"
                                        class="blank-input m-10">次</el-input>
                                </el-form-item>

                            </div>

                            <div class="gray" style="margin-bottom: 20px;">语言短信</div>
                            <div class="flex station-li p_20" v-show="message.button == 0">
                                <el-form-item label="短信类型:">
                                    <el-select v-model="sendData.sendType" placeholder="选择短信类型" class="blank-input m-10"
                                        @change="radioMessageChange">
                                        <el-option v-for="item in dict.type.radio_message" :key="item.value"
                                            :label="item.label" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </div>
                        </el-row>
                    </el-form>
                </div>

                <div class="station-function station-lora" v-show="message.button == 1">
                    <div class="gray">传输电台</div>
                    <div class="station-li">
                        <div class="flex p_20">
                            <div class="lh-40">选择电台:</div>
                            <el-select v-model="receiveData.radioStationCode" placeholder="选择电台"
                                class="blank-input m-10" style="width:300px;">
                                <el-option v-for="item in listAll.station" :key="item.radioStationCode"
                                    :label="item.radioStationName" :value="item.radioStationCode">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="gray">通道设置</div>
                    <div class="station-li">
                        <aisle :arr="aisleList" @setAisleList="setAisleList"></aisle>
                    </div>

                    <button class="bt-blue" style="position:absolute;right: 20px;margin-top: 20px;"
                        @click="postReceiveRadioStation">确定</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { sendRadioStation, receiveRadioStation, receiveList, sendList, getSend } from "@/api/business/transfer";
import { getRadioStationList } from "@/api/business/station";
import TProgress from '@/components/TZ/TProgress/index.vue';
import ChatWindow from '@/components/TZ/ChatWindow/index.vue';
import Aisle from '@/components/TZ/Aisle/index.vue';
// import Decimal from 'decimal.js';



export default {
    dicts: ['radio_message'],//1短信，2语音,3什么都不发
    props: {

    },
    data() {
        return {
            interface: {
                button: 0,
            },
            message: {
                button: 0
            },

            chatType: 0,//发送消息聊天类型
            station: {
                num: 100,
                numOn: 25,
                numOff: 75,
            },
            aisleList: [

            ],
            listAll: {
                station: [],//电台集合
            },
            sendData: {//发送
                srcId: "",//发送电台code
                dstId: "",//目标电台code
                channel: 0,
                freq: "",//工作频率 显示数据被除以一百万
                power: "",//发射功率 
                sendType: "",//短信类型
                data: "",//信息内容
                time: "",//设置时间
                data_base64: "",
                mode: "0",
                srcMobile: "13549842152",
                dstMobile: "13264859751",
                sendTimes: 1,
            },
            virtualFreq: 0,//工作频率
            receiveData: {//接收
                radioStationCode: "",//电台code
                data: [],
            },
            audioSrc: null,
            chatShow: false,
            mapShow: false,
            receiveChat: {
                list: [],
                pageNum: 1,
                pageSize: 10,
                total: 0,
            },//接收窗口
            sendChat: {
                list: [],
                pageNum: 1,
                pageSize: 10,
                total: 0,
            },//发送窗口
            txt: null,
            sendProgress: 0,
            timerId: null,
        }
    },

    components: {
        TProgress,
        ChatWindow,
        Aisle,
    },
    mounted() {
        this.getListAll()
        if (null != this.$route.query.srcId) {
            this.sendData.srcId = this.$route.query.srcId;
            this.dstIdChange();
        }
    },
    watch: {

    },
    methods: {
        change22(val) {
            console.log(val);
        },

        radioMessageChange(data) {
            this.chatType = this.getRadioMessage(data)
        },
        setReceivePageNum(val) {
            this.receiveChat.pageNum = val
            this.getReceiveList()
        },
        setSendPageNum(val) {
            this.sendChat.pageNum = val
            this.getSendList()
        },
        dstIdChange(index) {
            this.chatShow = true
            this.sendChat.pageNum = 1;
            this.receiveChat.pageNum = 1;
            this.getSendList();
            this.getReceiveList();
        },
        getReceiveList() {
            if ("" == this.sendData.dstId) {
                return
            }
            const data = {
                srcId: this.sendData.dstId,
                pageNum: this.receiveChat.pageNum,
                pageSize: this.receiveChat.pageSize,
                isAsc: 'desc',
                orderByColumn: 'create_time'
            }
            receiveList(data).then(response => {
                this.receiveChat.list = response.rows
                this.receiveChat.total = response.total
                for (let i = 0; i < this.receiveChat.list.length; i++) {
                    this.$set(this.receiveChat.list[i], 'sendTypeText', this.getRadioMessageLabel(this.receiveChat.list[i].sendType));
                    this.$set(this.receiveChat.list[i], 'sendTypeNum', this.getRadioMessage(this.receiveChat.list[i].sendType));
                }

            });
        },
        getSendList() {
            if ("" == this.sendData.srcId) {
                return
            }
            const data = {
                srcId: this.sendData.srcId,
                pageNum: this.sendChat.pageNum,
                pageSize: this.sendChat.pageSize,
                isAsc: 'desc',
                orderByColumn: 'create_time'
            }
            sendList(data).then(response => {
                this.sendChat.list = response.rows
                this.sendChat.total = response.total;
                for (let i = 0; i < this.sendChat.list.length; i++) {
                    this.$set(this.sendChat.list[i], 'sendTypeText', this.getRadioMessageLabel(this.sendChat.list[i].sendType));
                    this.$set(this.sendChat.list[i], 'sendTypeNum', this.getRadioMessage(this.sendChat.list[i].sendType));
                }
            });
        },
        uploadAudio() {
            const fileInput = document.createElement('input');
            fileInput.type = 'file';
            fileInput.accept = 'audio/*';
            fileInput.addEventListener('change', (event) => {
                const file = event.target.files[0];

                if (file) {
                    const reader = new FileReader();
                    reader.onload = () => {
                        this.audioSrc = reader.result;
                    };
                    reader.readAsDataURL(file);
                }
            });

            fileInput.click();
        },
        getListAll() {//获取集合数据
            const data = {
                isNet: 1,
                status: 0
            }
            getRadioStationList(data).then(response => {
                this.listAll.station = response.rows
            });
        },
        setAisleList(data) {//获取修改后的数据
            this.aisleList = data
        },
        setInterface(index) {
            this.interface.button = index
            if (index == 0) {
                if (this.sendData.dstId != "") {
                    this.chatShow = true
                }
            }
            if (index == 1) {
                this.mapShow = true
            }

        },
        setMessage(index) {
            this.message.button = index;
        },

        send(index) {
            if (index == 0) {//0传送音频
                this.sendData.data = ""
                const base64Data = this.audioSrc.split(',')[1];
                // const base64Data = this.audioSrc;
                this.sendData.data_base64 = base64Data
            } else {
                this.sendData.data_base64 = ""
            }

            if (index == 3) {
                this.sendData.data_base64 = ""
                this.sendData.data = ""
                // this.sendData.data = this.getRadioMessageLabel(this.sendData.sendType)
            }

            this.postSendRadioStation()
        },

        postSendRadioStation() {
            const freq = this.virtualFreq * 1000000
            // const freq = new Decimal(this.virtualFreq).mul(1000000).toNumber();
            this.sendData.freq = freq + ""
            this.sendData.power = this.sendData.power+"";
            sendRadioStation(this.sendData).then(response => {
                if (response.code == 200) {
                    this.audioSrc = null;
                    this.sendData.data_base64 = null
                    this.sendData.data = null
                    this.getSendList();
                    this.getReceiveList();
                    // 定时取发射状态
                    this.startTimer(response.data.sendId);
                }
            });
        },
        postReceiveRadioStation() {
            const data = {
                radioStationCode: this.receiveData.radioStationCode,
                data: this.aisleList
            }
            receiveRadioStation(data).then(response => {
                this.audioSrc = null;
                this.sendData.data_base64 = null
                this.sendData.data = null
            });
        },
        getRadioMessage(index) {
            const entries = this.dict.type.radio_message;
            // console.log("entries");
            // console.log(entries);
            // console.log(index);
            for (let i = 0; i < entries.length; i++) {
                if (entries[i].value == index) {
                    return entries[i].raw.remark
                }
            }
            return ""
        },
        getRadioMessageLabel(index) {
            const entries = this.dict.type.radio_message;
            for (let i = 0; i < entries.length; i++) {
                if (entries[i].value == index) {
                    return entries[i].label
                }
            }
            return ""
        },

        startTimer(sendId) {
            this.sendProgress = 0;
            this.timerId = setInterval(() => {
                if (this.sendProgress > 1 && this.sendProgress < 95) {
                    this.sendProgress += 3;
                }
                getSend(sendId).then(response => {
                    console.log(response)
                    console.log(response.data.sendStatus)
                    //电台发送状态 1-开始 2-完成 3-异常
                    if (response.data.sendStatus == "1" && this.sendProgress == 0) {
                        this.sendProgress = 1;
                    }
                    if (response.data.sendStatus >= "2") {
                        this.stopTimer();
                        if (response.data.sendStatus == "2") {
                            this.sendProgress = 100;
                        }
                    }
                })

            }, 3000); // 每秒更新一次
        },
        stopTimer() {
            if (this.timerId) {
                clearInterval(this.timerId);
                this.timerId = null;
            }
        }

    }
}
</script>

<style lang="scss" scoped>
.el-form-item__label {
    color: #9A9DAA;
    font-size: 16px;
    font-weight: 400;
}
.blank-input ::v-deep.el-input__inner{
    text-align: left;
}
.el-form-item ::v-deep.el-input-number--medium{
    width: auto !important;
}
</style>